{% extends 'base_dashboard.html' %}

{% block title %}Compose email — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
  <div>
    <div class="text-muted small">Admin · Email</div>
    <h3 class="fw-bold mb-0">Compose / bulk email</h3>
    <p class="text-muted small mb-0">
      Send the same message to a role, selected users, or a custom list.
      Placeholders are personalized per recipient when possible.
    </p>
  </div>
  <a href="{% url 'dashboard:email_templates' %}" class="btn btn-outline-secondary">
    <i class="bi bi-file-earmark-text me-1"></i>Templates
  </a>
</div>

<div class="card border-0 shadow-sm">
  <div class="card-body p-4">
    <form method="post" novalidate id="composeForm">
      {% csrf_token %}
      {% if form.non_field_errors %}
        <div class="alert alert-danger">{{ form.non_field_errors }}</div>
      {% endif %}

      <div class="mb-3">
        <label class="form-label fw-semibold">Recipients</label>
        <div class="d-flex flex-wrap gap-3">
          {% for radio in form.recipient_mode %}
          <div class="form-check">
            {{ radio.tag }}
            <label class="form-check-label" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
          </div>
          {% endfor %}
        </div>
      </div>

      <div class="row g-3 mb-3" id="modePanels">
        <div class="col-md-4" data-mode="role">
          <label class="form-label fw-semibold">Role</label>
          {{ form.role }}
          {% if form.role.errors %}<div class="text-danger small">{{ form.role.errors.0 }}</div>{% endif %}
        </div>
        <div class="col-md-8" data-mode="users">
          <label class="form-label fw-semibold">Users</label>
          {{ form.user_ids }}
          <div class="form-text">{{ form.user_ids.help_text }}</div>
          {% if form.user_ids.errors %}<div class="text-danger small">{{ form.user_ids.errors.0 }}</div>{% endif %}
        </div>
        <div class="col-12" data-mode="emails">
          <label class="form-label fw-semibold">Email addresses</label>
          {{ form.emails }}
          <div class="form-text">{{ form.emails.help_text }}</div>
          {% if form.emails.errors %}<div class="text-danger small">{{ form.emails.errors.0 }}</div>{% endif %}
        </div>
      </div>

      <div class="mb-3">
        <label class="form-label fw-semibold">Start from template (optional)</label>
        {{ form.template }}
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">Subject</label>
        {{ form.subject }}
        {% if form.subject.errors %}<div class="text-danger small">{{ form.subject.errors.0 }}</div>{% endif %}
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">HTML body</label>
        {{ form.body_html }}
        {% if form.body_html.errors %}<div class="text-danger small">{{ form.body_html.errors.0 }}</div>{% endif %}
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">Plain text (optional)</label>
        {{ form.body_text }}
      </div>

      <button type="submit" class="btn btn-primary" onclick="return confirm('Send this email now?');">
        <i class="bi bi-send-fill me-1"></i>Send email
      </button>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  const prefill = {{ template_prefill_json|safe }};
  const templateSelect = document.getElementById('id_compose_template');
  const subjectEl = document.getElementById('id_subject');
  const htmlEl = document.getElementById('id_body_html');
  const textEl = document.getElementById('id_body_text');
  if (templateSelect) {
    templateSelect.addEventListener('change', function () {
      const data = prefill[this.value];
      if (!data) return;
      if (subjectEl) subjectEl.value = data.subject || '';
      if (htmlEl) htmlEl.value = data.body_html || '';
      if (textEl) textEl.value = data.body_text || '';
    });
  }

  function syncMode() {
    const checked = document.querySelector('input[name="recipient_mode"]:checked');
    const mode = checked ? checked.value : 'role';
    document.querySelectorAll('#modePanels [data-mode]').forEach(el => {
      el.style.display = el.getAttribute('data-mode') === mode ? '' : 'none';
    });
  }
  document.querySelectorAll('input[name="recipient_mode"]').forEach(el => {
    el.addEventListener('change', syncMode);
  });
  syncMode();
})();
</script>
{% endblock %}